<template>
  <div class="order-body" :style="{ height: user != null ? '' : '100vh' }">
    <!-- {{ user != null }} -->
    <van-tabs v-if="user != null" v-model="activeName" color="#1faf88">
      <van-tab
        title="书籍"
        name="listen"
        title-inactive-color="#1faf88"
      ></van-tab>
      <van-tab title="课程" name="course"></van-tab>
      <van-tab title="专栏" name="column"></van-tab>
      <van-tab title="杂志" name="magazine"></van-tab>
      <van-tab title="训练营" name="training"></van-tab>
    </van-tabs>
    <!-- 没登录 -->
    <div v-if="user == null" style="padding-top: 50px">
      <div class="empty-box">
        <img src="/order_img/search-empty.png" width="100%" alt="" />
        <p style="font-size: 16px">你购买的内容可以在这里找到</p>
        <van-button
          to="login"
          round
          type="primary"
          style="width: 140px; background-color: #1faf88; margin: 30px 0"
          >登录</van-button
        >
      </div>
    </div>
    <div v-else>
      <!-- 没数据 -->
      <div v-if="collection == ''" style="padding-top: 50px">
        <div class="empty-box">
          <img src="/order_img/search-empty.png" width="100%" alt="" />
          <p>你购买的内容可以在这里找到</p>
        </div>
      </div>
      <!-- 有数据 -->
      <div v-else>
        <van-list>
          <van-cell
            v-for="(item, index) in collection"
            :key="index"
            style="margin-bottom: 8px"
          >
            <div class="order-item">
              <div class="van-row" style="padding-left: 10px; margin: 20px 0">
                <van-col span="5">
                  <img
                    class="cover"
                    :src="item.cover"
                    width="63"
                    height="84"
                    lazy="loaded"
                  />
                </van-col>
                <van-col
                  span="17"
                  style="
                    padding-left: 6px;
                    padding-right: 6px;
                    flex: 1 1 0%;
                    min-width: 0px;
                  "
                >
                  <div class="content" type="flex">
                    <h5>{{ item.book_name }}</h5>
                    <div class="info">作者: {{ item.author }}</div>
                  </div>
                </van-col>
                <van-col span="1" style="height: 91px; line-height: 91px">
                  <img src="/order_img/right_arrow.png" alt="" />
                </van-col>
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>

    <!-- 底部标签栏Tabbar -->
    <van-tabbar v-model="active" active-color="#3eaf7c">
      <van-tabbar-item icon="wap-home" name="/" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="goods-collect" name="/order" to="/order"
        >已购</van-tabbar-item
      >
      <van-tabbar-item icon="friends" name="/me" to="/me">我的</van-tabbar-item>
      <router-view />
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      active: '/order',
      activeName: 'listen',
      list: [],
      loading: false,
      finished: false,
      collection: '',
    }
  },
  mounted() {
    // console.log('this:', this)
    this.getCollection()
  },
  watch: {
    '$route.path': {
      handler(val) {
        this.active = val
      },
      immediate: true,
    },
  },
  methods: {
    ...mapMutations(['updateUser']),
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1)
    //     }
    //     // 加载状态结束
    //     this.loading = false
    //     // 数据全部加载完成
    //     if (this.list.length >= 1) {
    //       this.finished = true
    //     }
    //   }, 500)
    // },
    getCollection() {
      let url = 'collection'
      let id = sessionStorage.getItem('id')
      let params = `id=${id}`
      this.axios.post(url, params).then(res => {
        console.log('收藏夹', res)
        this.collection = res.data.data
      })
    },
  },
  computed: {
    ...mapState(['user']),
  },
}
</script>

<style scoped>
.order-body {
  background-color: #f7f7f7;
  margin-bottom: 50px;
}
.islogin {
  height: 100vh;
}
.empty-box {
  text-align: center;
  font-size: 16px;
  color: #ccc;
  line-height: 26px;
}
/* 列表图片 */
.order-item .cover {
  border: 1px solid #ebebeb;
  border-radius: 5px;
  overflow: hidden;
}
/* 列表中间 */
.order-item .content {
  height: 91px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.order-item .content h5 {
  font-size: 16px;
  color: #333;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-item .info {
  margin-bottom: 12px;
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
</style>
